<template>
    <button
        class="back-btn"
        @click="goBack"
        @mousedown="startPress"
        @mouseup="cancelPress"
        @mouseleave="cancelPress"
        @touchstart="startPress"
        @touchend="cancelPress"
        title="返回上一级，长按回主页"
    >
        <span>返回</span>
        <svg class="back-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 19L8 12L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </button>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'

const router = useRouter()
const pressTimer = ref(null)

const goBack = () => {
    router.back()
}

const goToHome = () => {
    router.push('/')
}

const startPress = () => {
    pressTimer.value = setTimeout(() => {
        goToHome()
    }, 800) // 长按800毫秒触发
}

const cancelPress = () => {
    if (pressTimer.value) {
        clearTimeout(pressTimer.value)
        pressTimer.value = null
    }
}
</script>

<style lang="less" scoped>
.back-btn {
    width: 100px;
    height: 80px;
    font-size: 15px;
    border-radius: 50%;
    border: none;
    background-color: #e6d7ff; /* 浅紫色背景 */
    color: #8b5cf6; /* 紫色图标 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;

    &:hover {
        background-color: #d8bbff; /* 悬停时稍深的紫色 */
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    }

    &:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(139, 92, 246, 0.2);
        background-color: #c9a8ff; /* 按下时更深的紫色 */
    }
}

.back-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.back-btn:hover .back-icon {
    transform: translateX(-2px);
}
</style>

